<template>
  <div>
    <Banner></Banner>
    <div class="homeMain">
      <div class="academicConference">
        <div class="homeTitle">学术会议</div>
        <div class="cardList">
          <el-space wrap :size="spaceSize">
            <CardItem row="深圳大学建筑与城市规划学院40周年院庆系列学术活动|“转型创新赋能都市圈高质量发展”会议型创新赋能都市圈高质量发展”会议"></CardItem>
            <CardItem :row="row"></CardItem>
            <CardItem :row="row"></CardItem>
            <CardItem :row="row"></CardItem>
            <CardItem :row="row"></CardItem>
            <CardItem :row="row"></CardItem>
            <CardItem :row="row"></CardItem>
            <CardItem :row="row"></CardItem>
          </el-space>
          <div class="more">
            <div class="btton">更多会务</div>
          </div>
        </div>
      </div>
      <div class="productCase">
        <div class="homeTitle">产品案例</div>
        <Banner></Banner>
        <div class="more">
          <div class="btton">更多案例</div>
        </div>
      </div>
      <div class="use">
        <div class="homeTitle">他们都在使用蔻享会务</div>
        <div class="smallCard">
          <el-space wrap :size="smallCardSize">
            <div class="cardTag"></div>
          </el-space>
        </div>
      </div>
      <div class="homeImg">
        <div class="imgLeft">
          <div class="imgTitle">举办会议 尽在蔻享</div>
          <div class="imgBotton">立即体验</div>
        </div>
        <div class="imgRight">
          <NuxtImg src="/images/ceshi.jpg" alt="logo" />
        </div>
      </div>
    </div>
    <div class="homeFooter">
      <Footer></Footer>
    </div>
  </div>
</template>

<script setup>
import Banner from "./banner"
const spaceSize = ref(32);
const smallCardSize = ref(24);
const row = ref('222');
</script>

<style lang="scss" scoped>
.homeMain {
  padding-bottom: 10px;

  .homeTitle {
    margin-bottom: 32px;
    text-align: center;
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 500;
    font-size: 32px;
    color: #333333;
  }

  .academicConference {
    padding: 24px 60px;

    .cardList {
      height: 100%;
    }
  }

  .productCase {
    margin-top: 64px;
    background: #DEF2FF;
    padding: 64px;
  }

  .use {
    padding: 64px 0px;
  }

  .smallCard {
    width: 100%;

    .cardTag {
      width: 240px;
      height: 120px;
      // padding: 35px 32px;
      background: #FFFFFF;
      box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.08);
      border-radius: 12px 12px 12px 12px
    }
  }

  .homeImg {
    background: #F0F4FF;
    display: flex;
    padding: 0 300px;
    justify-content: space-between;

    .imgLeft {
      margin-top: 58px;

      .imgTitle {
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 500;
        font-size: 48px;
        color: #333333;
      }

      .imgBotton {
        margin-top: 32px;
        width: 144px;
        height: 54px;
        background: #165DFF;
        border-radius: 8px 8px 8px 8px;
        text-align: center;
        line-height: 54px;
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 400;
        font-size: 20px;
        color: #FFFFFF;
        cursor: pointer;
      }
    }

    .imgRight {
      margin: 10px 0px;
      height: 100%;

      img {
        width: 260px;
        height: 260px;
      }
    }
  }
}

.more {
  width: 100%;
  margin-top: 40px;
  display: flex;
  justify-content: center;

  .btton {
    color: #165DFF;
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 400;
    font-size: 20px;
    color: #165DFF;
    border-radius: 8px 8px 8px 8px;
    border: 1px solid #165DFF;
    padding: 8px 20px;
    cursor: pointer;
  }
}
</style>